// echart 模型
<template>
  <div class="chart-modal">
    <div :class="chartModalSty">
      <div
        v-if="display"
        ref="dom"
        style="width:100%;height:100%"
      />
      <!-- 当数据为空时 显示无数据图标  -->
      <noDateSvg
        v-else
        title="暂无数据"
      />
    </div>
    <!-- 加载动画 -->
    <Spin
      v-if="loading"
      fix
    >
      <Icon
        type="ios-loading"
        size="18"
        class="loading-icon"
      />
      <div>Loading</div>
    </Spin>
  </div>
</template>

<script>
/**
 * echarts 组件调用
 *
 * @property {Array}  dataList 渲染echarts 的数据 （必填）
 * @property {Object}  fullOption echart setOption传入的option （必填）
 * @property {Boolean}  loading false(默认):不开启动画；true：显示加载动画
 */
import * as echarts from 'echarts'
import resize from './mixins/resize.js'
import noDateSvg from './nodatesvg.vue'
export default {
  components: {
    noDateSvg
  },
  mixins: [resize],
  props: {
    // dataList: {
    //     //  echarts 数据
    //     type: Array,
    //     default: () => []
    // },
    fullOption: {
      // echarts 配置项 通过父组件传递过来
      type: Object,
      default: () => ({})
    },
    loading: {
      //  加载动画开启 配置
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      display: false
    }
  },
  computed: {
    chartModalSty() {
      return [
        'chart-modal-box',
        {
          'chart-modal-no-data': !(this.display) && this.types === ''
        }
      ]
    }
  },
  watch: {
    // dataList: {
    //     deep: true,
    //     handler () {
    //         this.init();
    //     }
    // },
    // loading () {
    //     if (this.types === 'map') {
    //         this.init();
    //     }
    // },
    fullOption: {
      deep: true,
      handler(val) {
        if (val.init) {
          this.display = true
          this.init()
        }
      }
    }
  },
  mounted() {
    if (this.fullOption.init) {
      this.display = true
      this.init()
    }
  },
  methods: {
    /**
         * 当窗口缩放时，echart动态调整自身大小
         */
    handleWindowResize() {
      if (!this.chart) return
      this.chart.resize()
    },
    /**
         * 更新echart视图
         */
    updateChartView() {
      if (this.display) {
        if (!this.chart) {
          this.chart = echarts.init(this.$refs.dom)
        }
        this.chart.setOption(this.fullOption.option)
        this.chart.off('click')
        this.chart.on('click', (params) => {
          this.$emit('on-echart-click', params)
        })
      }
    },
    /**
         * 初始化
         */
    init() {
      //  因为 echarts dom 会根据是否有数据来显示 所以这里加上异步获取dom
      const newPromise = new Promise((resolve) => {
        resolve()
      })
      // 然后异步执行echarts的初始化函数
      newPromise.then(() => {
        // 此dom为echarts图标展示dom
        this.updateChartView()
      })
    }
  }
}
</script>

<style scoped lang='less'>
.chart-modal {
    width: 100%;
    height: 100%;
    position: relative;
    .ivu-spin-fix {
        background: #fff;
    }
}
.chart-modal-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.chart-modal-no-data{
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading-icon {
  animation: ani-loading-spin 1s linear infinite;
}
@keyframes ani-loading-spin {
  form {
      transform: rotate(0deg);
  }

  50% {
      transform: rotate(180deg);
  }

  to {
      transform: rotate(360deg);
  }
}
</style>
